<template>
    <a-form layout="vertical">
		<a-tabs default-active-key="styles" size="small">
			<a-tab-pane key="styles" :tab="i18n('componentStyle.style','风格')">
				<!--标题和边框基础风格-->
				<component-style :curComponent="curComponent"></component-style>
				<!--文本数据风格-->
				<a-collapse default-active-key="1" :bordered="false">
					<template #expandIcon="props">
                        <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
					</template>
					<a-collapse-panel key="1" :header="filterI18n('controlConfiguration','控件配置')">
						<a-row :gutter="24" style="margin: 0px">
							<a-col :span="12">
								<a-form-item :label="filterI18n('layout','布局方式')">
									<a-radio-group v-model:value="config.styles.layout">
										<a-radio value="vertical">{{filterI18n('vertical','垂直')}}</a-radio>
										<a-radio value="standard">{{filterI18n('level','水平')}}</a-radio>
									</a-radio-group>
								</a-form-item>
							</a-col>
							<a-col :span="12">
								<a-form-item :label="filterI18n('filterButton','筛选按钮')">
									<a-switch v-model:checked="config.styles.showButton" size="small"/>
								</a-form-item>
							</a-col>
						</a-row>
						<a-row :gutter="24" style="margin: 0px">
							<a-col :span="12">
								<a-form-item :label="i18n('componentStyle.fontSize','字体大小')">
									<a-input-number style="width: 100%" v-model:value="config.styles.fontSize" :min="12"/>
								</a-form-item>
							</a-col>
							<a-col :span="12">
								<a-form-item :label="i18n('componentStyle.fontColor','字体颜色')">
									<a-input style="width: 100%" v-model:value="config.styles.titleColor" type="color"/>
								</a-form-item>
							</a-col>
						</a-row>

					</a-collapse-panel>
				</a-collapse>
			</a-tab-pane>
			<a-tab-pane key="advancedConf" :tab="i18n('componentStyle.advanced','高级')">
				<div class="multicolorLabelConfig-head">
					<div style="flex: 1.5">{{filterI18n('title','标题')}}</div>
					<div style="flex: 1.2">{{filterI18n('types','类型')}}</div>
					<div>{{i18n('componentStyle.style','风格')}}</div>
					<div style="flex: 0.7">{{filterI18n('configuration','配置')}}</div>
				</div>
				<div class="multicolorLabelConfig-list">
					<div class="multicolorLabelConfig-common" v-for="(record,index) in config.advancedConf.publish.paramMapping" :key="index">
						<div class="multicolorLabelConfig-common-le" style="flex: 1.5">
							<rx-icon-show icon="icon-lineoffline" @click="tableDelete(index)"  />
							<a-input style="margin-right: 4px" v-model:value="record.label"></a-input>
						</div>
						<div style="flex: 1.2">
							<a-select
								style="width: 90%"
								v-model:value="record.type"
								:options="types"
								@change="typeChange(record,types)"
								:allowClear="true">
							</a-select>
						</div>
						<div>
							<a-select style="width: 70px" v-model:value="record.stylize">
								<a-select-option value="1">1/4</a-select-option>
								<a-select-option value="2">1/3</a-select-option>
								<a-select-option value="3">2/3</a-select-option>
								<a-select-option value="4">1/2</a-select-option>
								<a-select-option value="5">1</a-select-option>
							</a-select>
						</div>
						<div style="flex: 0.7" >
							<a-button style="width: 60px;overflow: hidden" size="small" @click="setSettings(record)">{{filterI18n('configuration','配置')}}</a-button>
						</div>
					</div>
				</div>
				<div class="addColor" @click="addPublish()"><rx-icon-show class="addColor-icon" icon="icon-lineVue3_add" /><div>{{filterI18n('newAdditions','新增')}}</div></div>
			</a-tab-pane>
		</a-tabs>
    </a-form>
</template>

<script>

/**
 * 筛选器配置
 */
import ComponentDef from "@/views/modules/design/right-component/common/component-def.js";
import {Util,GridMixin} from "@lowcode/jpaas-base-lib";
import Filters from "@/views/modules/design/right-component/filter-controller/index.js";

export default {
	name: "FilterDef",
	mixins:[GridMixin,ComponentDef,Filters],
	data() {
		return {
			types:[
				{label:this.filterI18n('text','文本框'),value:"text",dataType:"varchar",widthHeight: ['500px', '300px']},
				{label:this.filterI18n('select','下拉框'),value:"select",dataType:"varchar",widthHeight: ['1000px', '700px']},
				{label:this.filterI18n('number','数字输入框'),value:"number",dataType:"number",widthHeight: ['500px', '300px']},
				{label:this.filterI18n('date','日期'),value:"date",dataType:"date",widthHeight: ['500px', '400px']},
                {label:this.filterI18n('month','月份'),value:"month",dataType:"month",widthHeight: ['500px', '300px']},
                {label:this.filterI18n('year','年份'),value:"year",dataType:"year",widthHeight: ['500px', '300px']},
				{label:this.filterI18n('dateRange','日期范围'),value:"dateRange",dataType:"varchar",widthHeight: ['500px', '400px']},
				{label:this.filterI18n('dialog','对话框'),value:"dialog",dataType:"varchar",widthHeight: ['1000px', '700px']},
				{label:this.filterI18n('user','用户选择框'),value:"user",dataType:"varchar",widthHeight: ['500px', '400px']},
				{label:this.filterI18n('group','部门选择框'),value:"group",dataType:"varchar",widthHeight: ['500px', '400px']},
				{label:this.filterI18n('tree','下拉树'),value:"tree",dataType:"varchar",widthHeight: ['500px', '500px']},
			],
			selectedRowKeys:[]
		}
	},
	computed: {
		publishSelection() {
			return {
				selectedRowKeys: this.selectedRowKeys,
				onChange: this.onSelectChange,
			}
		},
	},
	created() {
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"componentStyleLang",key);
		},
		filterI18n(name,text,key){
			return this.$ti18(name,text,"filterLang",key);
		},
		addPublish(){
			let key= Util.randomId();
			this.config.advancedConf.publish.paramMapping.push({
				idx_:key,
				key:key,
				label:"",
				type:"",
				settings:"",
				stylize:'1',
				value:'',
			});
		},
		typeChange(record){
			record.settings="";
		},
		setSettings(record){
			if(!record.type){
				this.$notification["warning"]({
					message:this.filterI18n('actionTips','操作提示'),
					description:this.filterI18n('selectType','请先选择类型！')
				});
				return ;
			}
			let component = Filters.components[record.type+"-filter"];
			let  paramMappings =  this.config.advancedConf.publish.paramMapping.filter(res=>{
				if(res.key != record.key){
					return true;
				}
			})
            let widthHeight = []
            this.types.filter(res=>{
                if (res.value ==record.type){
                    widthHeight = res.widthHeight
                }
            })
			let conf = {
				component: component,
				title:this.filterI18n('ctlConfig','控件配置'),
				curVm: this,
				data: {row: record,paramMappings:paramMappings},
				zIndex:999,
				widthHeight:widthHeight
			};
			Util.open(conf, function (action,data) {
				if (action != 'ok') {
					return;
				}
				record.label=data.title;
				record.settings=data.settings;
				if(record.type == 'user' || record.type == 'group'){
					record.values=data.defValue || [];
				}else if(record.type == 'tree'){
					record.values=data.defValue || "";
				}
				else {
					record.value=data.defValue;
				}
			});
		},
		tableDelete(index){
			this.config.advancedConf.publish.paramMapping.splice(index,1)
		},
	},
	watch: {}
}
</script>

<style scoped>
.multicolorLabelConfig-head{
	display: flex;
	height: 40px;
	border: 1px solid #d9d9d9;
	border-right: none;
	border-radius: 5px 5px 0px 0px;
}
.multicolorLabelConfig-head>div{
	flex: 1;
	height: 40px;
	line-height: 40px;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-right: 1px solid #d9d9d9;
}
.multicolorLabelConfig-list{
	border: 1px solid #d9d9d9;
	border-top: none;
	border-bottom: none;
}
.multicolorLabelConfig-common{
	display: flex;
	height: 40px;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #d9d9d9;
}
.multicolorLabelConfig-common >div{
	height: 40px;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-right: 1px solid #d9d9d9;
}
.multicolorLabelConfig-common >div:last-child{
	border-right: none;
}
.multicolorLabelConfig-common-le i{
	margin-left: 10px;
	font-size: 18px;
	margin-right: 10px;
	cursor: pointer;
}
.multicolorLabelConfig-common-le i:hover{
	color: #4285f4;
}
.addColor{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	text-align: center;
	border: 1px solid #d9d9d9;
	height: 35px;
	line-height: 35px;
	color: #4285f4;
	font-size: 14px;
	margin-bottom: 15px;
	border-top: none;
	text-align: center;
	margin-bottom: 10px;
	cursor: pointer;
}
.addColor-icon{
	margin-right: 5px;
	font-size: 18px;
}
</style>
